<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;color: #000;}
        #header{
            background-color: #333;
            height: 50px;
            color: #ccc;
            display: flex;
            padding: 0 20px;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        #footer{
            height: 400px;
            background-color: #eee;
            border-top: solid 1px #ccc;
        }

        #cont{
            position: relative;
        }

        .contTop{
            width: 1200px;
            margin: 0 auto;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
        }
        .contTop .proImgBox{
            width: 400px;
            position: relative;
        }

        .proImgBox .smallBox{
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: solid 1px #ccc;
            box-sizing: border-box;
        }
        .proImgBox .smallBox img{
            width: 400px;
        }
        .proImgBox .smallBox span{
            position: absolute;
            left:0;top:0;
            width: 200px;
            height:200px;
            background: rgba(255, 255, 0, 0.6);
            display: none;
        }
        .proImgBox .bigBox{
            background: #fff;
            border: solid 1px #ccc;
            width: 400px;
            height: 400px;
            position: absolute;
            right: -400px;top: 0;
            overflow: hidden;
            z-index: 1;
            box-sizing: border-box;
            display: none;
        }
        .proImgBox .bigBox img{
            width: 800px;
            position: absolute;
            left:0;top:0;
        }

        .contTop .proInfoBox{
            width: 590px;
            padding: 10px;
            box-sizing: border-box;
        }
        .proInfoBox h3{
            font-size: 40px;
        }
        .proInfoBox p{
            line-height: 60px;
        }
        .proInfoBox p:nth-child(2){
            font-size: 14px;
            color: #999;
        }
        .proInfoBox p:nth-child(3){
            font-size: 30px;
            color: #f00;
            position: relative;
            top: 120px;
        }
        .proInfoBox p:nth-child(4){
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            width: 100px;
            border-radius: 10px;
            border: solid 2px #ccc;
            background-color: #efefef;
            position: relative;
            top: 140px;
            cursor: pointer;
        }

        .contBottom img{
            width: 100%;
            display: block;
        }

        .addCart{
            height: 80px;
            border-top: solid 2px #efefef;
            position: absolute;
            bottom:0;
            left:0;right:0;
            background-color: #fff;
            display: none;
        }
        .addCart .addCartCont{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }
        .addCartCont .proInfo h5{
            font-size: 14px;
            margin-bottom: 6px;
        }
        .addCartCont .proInfo p{
            font-size: 14px;
            color: #999
        }
        .addCartCont .priceInfo{
            display: flex;
            align-items: center;
        }
        .addCartCont .priceInfo span{
            display: block;
            width: 140px;
            height: 40px;
            border: solid 1px #999;
            border-radius: 6px;
            background: #5f7ed7;
            color: #fff;
            line-height: 40px;
            text-align: center;
        }
        .addCartCont .priceInfo p{
            color: #d44d44;
            font-weight: bold;
            font-size: 24px;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="cont">
        <div class="contTop">
            <div class="proImgBox">
                <div class="smallBox">
                    <img src="" alt="">
                    <span></span>
                </div>
                <div class="bigBox">
                    <img src="" alt="">
                </div>
            </div>
            <div class="proInfoBox">
                <h3></h3>
                <p></p>
                <p></p>
                <p class="addPro">加入购物车</p>
            </div>
        </div>
        <div class="contBottom">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_0/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_1/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_2/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_3/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_4/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_5/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_6/format,webp/quality,Q_100">
            <img src="https://resource.smartisan.com/resource/f0124e173fd3f6eb15fc64d8794a22e1.jpg?x-oss-process=image/resize,w_2878/indexcrop,y_1440,i_7/format,webp/quality,Q_100">
        </div>
        <div class="addCart">
            <div class="addCartCont">
                <div class="proInfo">
                    <h5>商品名称</h5>
                    <p>商品的介绍</p>
                </div>
                <div class="priceInfo">
                    <p>￥2999.00</p>
                    <span>加入购物车</span>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script src="../public/renderCart.js"></script>
<script>
    // 加载头部
    $("#header").load("../public/header.html");
    // 加载底部
    $("#footer").load("../public/footer.html");

    // 设置初始元素的位置，通过absolute模拟fixed的定位效果
    $(".addCart").css({
            // 获取屏幕的可视区域的高度         header的高度  addCart自己的高度
        top:document.documentElement.clientHeight - 50 - 80
    })

    // 绑定滚动事件
    $(document).scroll(function(){
        // 不断的重新计算addCart的top值，此时top值的计算，要加上滚动的距离
        $(".addCart").css({
            top:document.documentElement.clientHeight - 50 - 80 + $(this).scrollTop()
        })

        // 因为初始不需要addCart，所以根据滚动的距离实时判断，是否需要显示
        if($(this).scrollTop() >= 420){
            $(".addCart").fadeIn();
        }else{
            $(".addCart").fadeOut();
        }

        // 当滚动到最底部时，不应该盖住footer的区域
        // 设置最大值，当到达最大之后，不再实时增加滚动的距离，而是固定3420的滚动距离
        if($(this).scrollTop() >= 3420){
            $(".addCart").css({
                top:document.documentElement.clientHeight - 50 - 80 + 3420,
            })
        }else{
            $(".addCart").css({
                top:document.documentElement.clientHeight - 50 - 80 + $(this).scrollTop()
            })
        }
    })
</script>

<script>
    // 读取地址栏的#号后面的部分，包括#号自身，将#号处理掉
    var hash = location.hash.slice(1);
    // 开启数据请求
    $.ajax({
        url:"../data/pro.json", // 请求商品数据
        dataType:"text",        // 设置请求到的数据格式
        success:function(res){  // 请求成功，拿到数据
            // 解析数据
            res = JSON.parse(res);
            // 遍历数据
            for(var i=0;i<res.length;i++){
                // 查找个地址栏上获取到的数据一致的商品数据
                if(res[i].proId === hash){
                    // console.log(res[i]);
                    // 内容的修改
                    $(".proImgBox").find("img").attr("src",res[i].src);
                    $(".proInfoBox").find("h3").html(res[i].name);
                    $(".proInfoBox").find("p").eq(0).html(res[i].info);
                    $(".proInfoBox").find("p").eq(1).html(res[i].price);
                }
            }
        }
    })

</script>

<script>
    // 加入购物车功能
    // 存数据
    // 一个购物车可以存储多个商品
    // [{id:"1233",num:3},{id:"jg234",num:5},{id:"871rj",num:1}...]

    // 提前读取数据:proMsg
    // 读取将来计划要存的名字:proMsg
    var msg = localStorage.getItem("proMsg");
    // 判断是否曾经存过数据
    if(msg === null){
        // 没有存过，设置空数组
        msg = [];
    }else{
        // 存过，转成数组
        msg = JSON.parse(msg);
    }

    // 点击按钮
    $(".addPro").click(function(){
        // 读用户信息
        var uMsg = localStorage.getItem("userMsg");
        // 解析用户信息
        if(uMsg === null){
            uMsg = [];
        }else{
            uMsg = JSON.parse(uMsg);
        }
        // 判断是否有登录用户
        var flag = false;
        for(var i=0;i<uMsg.length;i++){
            if(uMsg[i].isLogin === "ok"){
                flag = true;
                break;
            }
        }
        // 加入购物车时，也需要判断是否登录，没有登录，不能加入购物车
        if(flag){
            // 判断数组是否是空
            if(msg.length < 1){
                // 如果是空，第一次存：直接存
                msg.push({
                    id:location.hash.slice(1),
                    num:1,
                    flag:true,
                    price:$(this).prev("p").html()
                })
                // 存储到localstorage
                localStorage.setItem("proMsg",JSON.stringify(msg))
            }else{
                // 如果不是空，非第一次存：判断这次的数据是不是新的
                // 记录是否是老商品的状态
                var onoff = false;
                // 遍历数据
                for(var i=0;i<msg.length;i++){
                    // 判断当前点击的商品是否在数据中找到
                    if(msg[i].id === location.hash.slice(1)){
                        // 如果找到了，记录下来
                        onoff = true
                        // 停止遍历
                        break;
                    }
                }
                // 循环结束，判断状态是否被记录
                if(onoff){
                    // 如果状态记录了，老的数据，增加老数据的数量
                    msg[i].num++;
                }else{
                    // 如果状态没有记录，新的数据，增加一个新数据
                    msg.push({
                        id:location.hash.slice(1),
                        num:1,
                        flag:true,
                        price:$(this).prev("p").html()
                    })
                }
                // 存储到localstorage
                localStorage.setItem("proMsg",JSON.stringify(msg))
            }
        }else{
            location.href = "../login/index.html";
        }

        renderCart();
    })

</script>

<script>
    // 获取元素的测试
    // console.log($(".smallBox"));
    // console.log($(".smallBox").find("img").outerWidth());
    // console.log($(".smallBox").find("span"));
    // console.log($(".bigBox"));

    // 获取特殊元素：img的尺寸的测试
    // $(".bigBox").find("img").on("load",function(){
    //     console.log($(".bigBox").css({display:"block"}).find("img").outerHeight());
    // })

    // 鼠标进入左侧小图，显示遮罩层和右侧大图
    $(".smallBox").mouseover(function(){
        $(".smallBox").find("span").show();
        $(".bigBox").show();
    })

    // 鼠标离开左侧小图，隐藏遮罩层和右侧大图
    $(".smallBox").mouseout(function(){
        $(".smallBox").find("span").hide();
        $(".bigBox").hide();
    })

    // 右侧图加载完成之后（为了将来获取右侧图片的尺寸）
    $(".bigBox").find("img").on("load",function(){
        // 鼠标在左侧小图移动
        $(".smallBox").mousemove(function(){
            // 鼠标相对于页面的x坐标
            // event.pageX

            // $(".smallBox")距离页面左侧的距离
            // $(".smallBox").offset().left

            // $(".smallBox").find("span")的宽度
            // $(".smallBox").find("span").width()

            // 计算遮罩层真正的left和top值
            var x = event.pageX - $(".smallBox").offset().left - $(".smallBox").find("span").width()/2;
            var y = event.pageY - $(".smallBox").offset().top - $(".smallBox").find("span").height()/2;

            // 遮罩层的边界限定
            // 判断遮罩层能移动的最小值
            if(x<0){
                x = 0;
            }
            if(y<0){
                y = 0;
            }
            // 计算遮罩层能移动的最大值
            var maxW = $(".smallBox").outerWidth() - $(".smallBox").find("span").width();
            var maxH = $(".smallBox").outerHeight() - $(".smallBox").find("span").height();
            // 判断遮罩层能移动的最大值
            if(x>maxW){
                x = maxW;
            }
            if(y>maxH){
                y = maxH;
            }

            // 设置遮罩层的位置
            $(".smallBox").find("span").css({
                left:x,
                top:y
            })

            // 计算遮罩层在左侧小图移动的比例
            // console.log(x / maxW, y/maxH);

            // 计算右侧大图能移动的最大距离
            var bigMaxW = $(".bigBox").outerWidth() - $(".bigBox").find("img").width();
            var bigMaxH = $(".bigBox").outerHeight() - $(".bigBox").find("img").height();

            // 根据左侧遮罩层移动的距离的比例，计算右侧大图要移动的距离，并设置
            $(".bigBox").find("img").css({
                left:x / maxW * bigMaxW,
                top:y / maxH * bigMaxH
            })
        })
    })

</script>

</html>